<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css">
    <style>
        .header {
            background: #ffffff;
            border-radius: 10px 10px 0px 0px;
        }

        form {
            margin: 10px 15px 15px;
        }

        .header h1 {
            width: 100%;
            color: #55557f;
            font-size: 20px;
        }
        .huoqu {
            background: #fff;
            color: #0C0C0C;
            border: 1px solid #E6E6E6;
        }
        .huoqu:hover {
            color: #0C0C0C;

        }
        .zhuce {
            width: 100%;
            background: #55aaff;
            color: #fff;
            font-size: 18px;
            border-radius: 5px;
        }

        .zhuce:hover {
            opacity: 1;
        }

        .layui-form-checked[lay-skin=primary] i {
            border-color: #2ea4fd !important;
        }

        .layui-form-checked i, .layui-form-checked:hover i {
            background-color: #2ea4fd !important;
        }

    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="layui-row">
    <form action="" class="layui-form layui-form-pane layui-col-xs11">
        <!-- 第一行-->
        <div class="layui-form-item layui-row header" style="margin-top: -5px;">
            <h1 class="layui-col-xs6 layui-col-xs-offset3">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注册您的公司账号</h1>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><i
                    class="layui-icon layui-icon-username"></i></label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" id="username" name="username" lay-verify="username" class="layui-input"
                       placeholder="请输入用户名"/>
            </div>
        </div>

        <!-- 第二行-->
        <div class="layui-form-item">
            <label class="layui-form-label"><i
                    class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="password" autocomplete="off" id="pwd1" name="password" lay-verify="password" class="layui-input"
                       placeholder="请输入密码"/>
            </div>
        </div>

        <!-- 第三行-->
        <div class="layui-form-item">
            <label class="layui-form-label"><i
                    class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="password" id="pwd2" name="password" lay-verify="password_twice" class="layui-input"
                       placeholder="请再次输入密码"/>
            </div>
        </div>

        <!-- 第四行-->
        <div class="layui-form-item">
            <input type="checkbox" id="key_service" lay-verify="check"  name="" title="我已阅读并同意 <a href='#'>《用户协议》</a><a>《隐私政策》</a>"
                   lay-skin="primary">
        </div>

        <div class="submitDiv" style="margin-left: 210px" >
            <input id="register" type="button"  class="layui-btn layui-btn-normal" value="注册">
        </div>

    </form>
</div>

<script src="../../lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['form','jquery','layer'], function () {
        var form   = layui.form;
        var $      = layui.jquery;
        var layer  = layui.layer;
        //添加表单失焦事件
        //验证表单
        $('#username').blur(function() {
            var user = $('#username').val();
            //alert(user);
            var d={"username":user};
            $.ajax({
                url:'http://localhost:8081/admin/select',
                type:'post',
                dataType:'json',
                data:JSON.stringify(d),
                contentType: "application/json;charset=utf-8",
                //验证用户名是否可用
                success:function(data){
                    if (data.msg== "1") {
                        // $('#ri').removeAttr('hidden');
                        // $('#wr').attr('hidden','hidden');
                    } else {
                        layer.msg('当前用户名已被占用! ')
                    }
                }
            })
        });
        // you code ...
        // 为密码添加正则验证
        $('#pwd1').blur(function() {
            var reg = /^[\w]{6,12}$/;
            if(!($('#pwd1').val().match(reg))){
                layer.msg('请输入合法的密码');
            }else {
                // $('#pri').removeAttr('hidden');
                // $('#pwr').attr('hidden','hidden');
            }
        });
        //验证两次密码是否一致
        $('#pwd2').blur(function() {
            if($('#pwd1').val() !== $('#pwd2').val()){
                layer.msg('两次输入密码不一致!');
            }else {
                // $('#rpri').removeAttr('hidden');
                // $('#rpwr').attr('hidden','hidden');
            }
        });

        //
        //添加表单监听事件,提交注册信息
        $('#register').click(function() {
            var checked=$("#key_service").get(0)
            if (checked.checked==false){
                layer.msg('请勾选用户协议');
            }
            else{
                var user = $('#username').val();
                var pwd = $('#pwd1').val();
                var d={"username":user,"password":pwd};
                $.ajax({
                    url:'http://localhost:8081/admin/insert',
                    type:'post',
                    dataType:'json',
                    data:JSON.stringify(d),
                    contentType: "application/json;charset=utf-8",
                    success:function(data){
                        if (data.msg == "1") {
                            layer.msg('注册成功',{time: 1000},function () {
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                            });
                        }else {
                            layer.msg('注册失败');
                        }
                    }
                })
                //防止页面跳转
                return false;
            }
        });
    });
</script>
</body>
</html>
